<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>基于光标位置的块阴影</title>
		<style type="text/css">
			* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: aliceblue
}
div {
  float: left;
  width: calc(100vw / 11);
  height: calc(100vh / 11);
  margin: calc(100vh / 11) 0 0 calc(100vw / 11);
}
@element 'div' {
  $this {
    box-shadow:
      rgba(0,0,0,.3)
      eval('(offsetLeft + offsetWidth/2 - cursorX) / 50')px
      eval('(offsetTop + offsetHeight/2 - cursorY) / 50')px
      1vh
    ;
  }
}
		</style>
	</head>
	<body>
		
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.0/EQCSS.min.js"></script>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>


<script type="text/javascript">
	var cursorX = 0
var cursorY = 0

function update(e){
  cursorX = e.clientX || e.touches[0].clientX
  cursorY = e.clientY || e.touches[0].clientY
  EQCSS.apply()
}

// Update cursor position every mouse/touch move
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
</script>
	</body>
</html>
